<template>
  <div class>
    <div class="input-item">
      <div class="lbl-box">
        <label for="txtSmsCode">请输入验证码</label>
      </div>
      <div class="txt-box">
        <div class="val-box all">
          <input
            class="txt-input"
            id="txtSmsCode"
            name="sms_code"
            type="text"
            placeholder="请输入验证码"
            ref="sms_code"
            value
            v-model="sms_code"
            @change="change_code"
          >
          <i class="icon iconfont icon-guanbi111 custom-Eicon" @click="keywordEmpty()"></i>
        </div>
      </div>
    </div>
    <div class="input-item">
      <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
    </div>
    <div class="input-item">
      <el-button
        type="button"
        @click="sendcode"
        :disabled="disabled"
        v-if="disabled==true"
      >{{btntxt}}</el-button>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import constant from "@/utils/constant.js";
// 引用API文件
import http from "@/utils/http.js";
export default {
  name: "smsCode",
  data() {
    return {
      disabled: false,
      time: 0,
      btntxt: "重新发送",
      sms_code: ""
    };
  },
  methods: {
    keywordEmpty() {
      this.$refs.sms_code.value = "";
      this.$store.commit("updateSmsCode", "");
    },
    change_code() {
      this.$store.commit("updateSmsCode", this.sms_code);
    },
    //手机验证发送验证码
    sendcode() {
      const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
      let mobile = this.$store.state.loginform.mobile;
      if (mobile == "") {
        this.$message({
          message: "手机号不能为空",
          type: "warning"
        });
        return;
      }
      if (!reg.test(mobile)) {
        this.$message({
          message: "请输入正确的手机号",
          type: "warning"
        });
        return;
      } else {
        console.log(mobile);

        http.post(this, {
          url: "ucenter/bindmobile_sms",
          data: {
            mobile: mobile,
            token:localStorage.getItem("user_token")
          },
          dataType: "json",
          success: function(data) {
            console.log("发送短信:", data);
            if (data.status == 1) {
              this.$message({
                message: "发送成功",
                type: "success",
                center: true
              });
            } else {
              this.$message.error(data.info);
            }
          }
        });

        this.time = 60;
        this.disabled = true;
        this.timer();
      }
    },
    //60S倒计时
    timer() {
      if (this.time > 0) {
        this.time--;
        this.btntxt = this.time + "s后重新获取";
        setTimeout(this.timer, 1000);
      } else {
        this.time = 0;
        this.btntxt = "获取验证码";
        this.disabled = false;
      }
    }
  },
  components: {},
  created() {}
};
</script>

<style scoped lang="css">
</style>
